import React, { useState, useEffect } from 'react'
import { NavBar, Button, List, SwipeAction, Toast } from 'antd-mobile'
import { useNavigate } from 'react-router-dom'
import { LeftOutline, SetOutline } from 'antd-mobile-icons'
import { archiveService } from '../../services/archiveService'
import type { ArchiveData } from '../../services/archiveService'

/**
 * 健康档案管理页面组件
 * 用于展示、创建、编辑和删除健康档案
 */
function Index() {
  const navigate = useNavigate()  // 使用React Router的导航功能
  const [archives, setArchives] = useState<ArchiveData[]>([])  // 存储档案数据的数组状态

  // 加载档案数据
  useEffect(() => {
    loadArchives()
  }, [])
/**
 * 加载归档数据的函数
 * 该函数从archiveService获取归档数据，并将其设置到状态中
 */
  const loadArchives = () => {
  // 调用archiveService的getArchives方法获取归档数据
    const data = archiveService.getArchives()
  // 将获取到的数据设置到archives状态中
    setArchives(data)
  }
/**
 * 处理返回操作的函数
 * 当用户点击返回按钮时，调用此函数导航到'/ment'路径
 */
/**
 * 返回按钮的处理函数
 * 用于实现返回功能，导航到指定页面
 */
/**
 * 返回按钮处理函数
 * 用于导航到指定页面
 */
  const handleBack = () => {  // 定义返回处理函数
    navigate('/ment')  // 使用navigate方法导航到'/ment'页面
  }
/**
 * 创建记录的处理函数
 * 该函数用于导航到归档页面
 */
  const handleCreateRecord = () => { // 定义一个名为 handleCreateRecord 的函数
    navigate('/archive') // 使用 navigate 函数导航到 '/archive' 路径
  }

  const handleDeleteArchive = (id: string) => {
    // 显示确认对话框
    if (window.confirm('确定要删除这个档案吗？删除后无法恢复。')) {
      try {
        if (archiveService.deleteArchive(id)) {
          Toast.show({
            content: '删除成功',
            position: 'center'
          })
          // 重新加载数据
          loadArchives()
        } else {
          Toast.show({
            content: '删除失败，档案可能不存在',
            position: 'center'
          })
        }
      } catch (error) {
        console.error('删除档案时发生错误:', error)
        Toast.show({
          content: '删除失败，请重试',
          position: 'center'
        })
      }
    }
  }

  const handleEditArchive = () => {
    // 这里可以实现编辑功能，暂时只显示提示
    Toast.show({
      content: '编辑功能开发中',
      position: 'center'
    })
  }

  // 获取关系的中文标签
  const getRelationshipLabel = (relationship: string): string => {
    const relationshipMap: Record<string, string> = {
      'self': '本人',
      'spouse': '配偶',
      'parent': '父母',
      'child': '子女',
      'relative': '亲戚',
      'friend': '朋友'
    }
    return relationshipMap[relationship] || relationship
  }
  return (
    <div style={{ 
      backgroundColor: '#f5f5f5', 
      minHeight: '100vh',
      padding: '16px'
    }}>
      {/* 顶部导航栏 */}
      <NavBar 
        style={{ 
          backgroundColor: '#ffffff',
          marginBottom: '16px',
          borderRadius: '8px'
        }}
        backArrow={false}
        left={
          <LeftOutline 
            style={{ 
              fontSize: '18px', 
              color: '#333',
              cursor: 'pointer'
            }}
            onClick={handleBack}
          />
        }
        right={
          <SetOutline style={{ 
            fontSize: '20px', 
            color: '#666'
          }} />
        }
      >
        健康档案
      </NavBar>

      {/* 警告信息框 */}
      {/* <div style={{
        backgroundColor: '#fff3cd',
        border: '1px solid #ffeaa7',
        borderRadius: '8px',
        padding: '16px',
        marginBottom: '16px',
        color: '#856404'
      }}>
        根据国家有关规定，就诊人在未实名认证状态下，平台将无法提供诊断、药品、挂号等服务，请及时实名认证！
      </div> */}

      {/* 主要内容区域 */}
      <div style={{
        backgroundColor: '#ffffff',
        borderRadius: '8px',
        padding: '16px',
        marginBottom: '16px'
      }}>
        {archives.length === 0 ? (
          // 空状态显示
          <div style={{
            textAlign: 'center',
            padding: '40px 20px',
            color: '#666'
          }}>
            <div style={{
              fontSize: '48px',
              marginBottom: '16px'
            }}>
              📋
            </div>
            <div style={{
              fontSize: '18px',
              fontWeight: 'bold',
              marginBottom: '8px'
            }}>
              暂无健康档案信息
            </div>
            <div style={{
              fontSize: '14px'
            }}>
              点击下方按钮创建您的第一份健康档案
            </div>
          </div>
        ) : (
          // 档案列表显示
          <div>
            <div style={{
              fontSize: '18px',
              fontWeight: 'bold',
              marginBottom: '16px',
              textAlign: 'center'
            }}>
              健康档案列表 ({archives.length})
            </div>
            <div style={{
              fontSize: '12px',
              color: '#666',
              textAlign: 'center',
              marginBottom: '16px',
              padding: '8px',
              backgroundColor: '#f8f9fa',
              borderRadius: '6px',
              border: '1px dashed #dee2e6'
            }}>
              💡 提示：向左滑动档案卡片可以删除或编辑
            </div>
            
            {archives.map((archive) => (
              <SwipeAction
                key={archive.id}
                rightActions={[
                  {
                    key: 'edit',
                    text: '编辑',
                    color: 'light',
                    onClick: () => handleEditArchive()
                  },
                  {
                    key: 'delete',
                    text: '删除',
                    color: 'danger',
                    onClick: () => handleDeleteArchive(archive.id)
                  }
                ]}
              >
                <List.Item
                  style={{
                    backgroundColor: '#f8f9fa',
                    borderRadius: '8px',
                    marginBottom: '12px',
                    border: '1px solid #dee2e6'
                  }}
                >
                  <div style={{
                    display: 'flex',
                    justifyContent: 'space-between',
                    alignItems: 'center',
                    marginBottom: '12px'
                  }}>
                    <span style={{
                      fontSize: '16px',
                      fontWeight: 'bold',
                      color: '#333'
                    }}>
                      {archive.name}
                    </span>
                    <span style={{
                      fontSize: '12px',
                      color: '#fff',
                      backgroundColor: '#28a745',
                      padding: '4px 8px',
                      borderRadius: '12px'
                    }}>
                      {getRelationshipLabel(archive.relationship)}
                    </span>
                  </div>
                  
                  <div style={{
                    fontSize: '14px',
                    color: '#666',
                    lineHeight: '1.5'
                  }}>
                    <div>身份证: {archive.idCard}</div>
                    <div>出生日期: {archive.birthDate}</div>
                    <div>性别: {archive.gender === 'male' ? '男' : '女'}</div>
                    <div>联系方式: {archive.phone}</div>
                    <div style={{
                      fontSize: '12px',
                      color: '#999',
                      marginTop: '8px'
                    }}>
                      创建时间: {new Date(archive.createTime).toLocaleDateString()}
                    </div>
                  </div>
                </List.Item>
              </SwipeAction>
            ))}
          </div>
        )}
      </div>

      {/* 底部新建档案按钮 */}
      <Button
        style={{
          width: '100%',
          height: '48px',
          borderRadius: '8px',
          backgroundColor: '#007bff',
          border: 'none',
          fontSize: '16px',
          fontWeight: 'bold',
          color: '#ffffff'
        }}
        onClick={handleCreateRecord}
      >
        新建档案
      </Button>
    </div>
  )
}

export default Index
